<template>
  <a-modal
    :maskClosable="false"
    title="查看评分"
    :width="1060"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :okButtonProps="{ class: { 'jee-hidden': true } }"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <h3>
      <a-icon
        type="database"
        style="margin-right: 10px"
      />{{ datacenterName }}</h3>

      <a-table
        ref="table"
        rowKey="datacenterId"
        size="middle"
        :columns="columns"
        :dataSource="gDataSource"
        :pagination="false"
      >
        <span
          slot="sortCol"
          slot-scope="text, record, index"
        >
          {{
              (gPagination.current - 1) * gPagination.pageSize +
              parseInt(index) +
              1
            }}
        </span>
          <span
            slot="score"
            slot-scope="text"
          >
            <a-progress
              status="active"
              :percent="text"
              :format="percent => `${percent}`"
              :stroke-color="text < 60 ? '#b93b04' : text < 80 ? '#ffb400' : '#089b04'"
            />
          </span>
      </a-table>
  </a-modal>
</template>
<script>
  import {
    GwListMixin
  } from '@/mixins/GwListMixin'
  import {
    gPostAction
  } from '@/api/manage'
  import Radar from './Radar'

  export default {
    name: 'DetailModal',
    mixins: [GwListMixin],
    components: {
      Radar,
    },
    data() {
      return {
        visible: false,
        confirmLoading: false,
        model: {},
        datacenterName: '',
        // 表头
        columns: [{
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          width: 50,
          scopedSlots: {
            customRender: "sortCol"
          },
        },
        {
          title: "模型名称",
          dataIndex: "name",
        },
        {
          title: "评分",
          width: '38%',
          dataIndex: "score",
          scopedSlots: { customRender: "score" },
        }, ],
      }
    },
    mounted() {
    },
    methods: {
      showModal(record) {
        this.model = Object.assign({}, record)
        this.visible = true
        this.datacenterName = ''
        this.gDataSource = [{
          name: '最优设备代价模型优化评分',
          score: 0,
        }, {
          name: '最优成本代价模型优化评分',
          score: 0,
        }, {
          name: '最优能耗代价模型优化评分',
          score: 0,
        }, {
          name: '配电子网均衡代价评分',
          score: 0,
        }]
        this.loadData()
      },
      loadData() {
        this.gQueryParam.datacenterId = this.model.datacenterId
        gPostAction('/model/appDatacenterModelScore', this.gQueryParam).then((res) => {
          if (res.success) {
            this.datacenterName = res.data.datacenterName
            this.gDataSource[0].score = res.data.deviceTotalScore
            this.gDataSource[1].score = res.data.costTotalScore
            this.gDataSource[2].score = res.data.powerTotalScore
            this.gDataSource[3].score = res.data.electricTotalScore
          }
        })
      },
      handleCancel(e) {
        this.visible = false
      },
    },
  }
</script>

<style
  lang="less"
  scoped
>
  .ant-form-text {
    width: 100%;
    padding-right: 0;
  }
</style>